<template>
  <div class="meetings-tabs">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick" class="tabs-content">
      <el-tab-pane v-for="(item,index) in tabsData" :key="index" :label="item.label" :name="item.name">
      </el-tab-pane>
    </el-tabs>
    <div class="router-box0">
      <component :is="activeName" :label="label"></component>
    </div>
  </div>

</template>
<script>
import meetingPeople from "./pepele.vue";
import meetingQues from "./question.vue";
import meetingNotes from "./notes.vue";
import meetingPapers from "./papers.vue";
import meetingSeats from "./seats.vue";
import meetingBacs from "./seats.vue";
export default {
  components: {
    meetingPeople,
    meetingQues,
    meetingNotes,
    meetingPapers,
    meetingSeats,
    meetingBacs
  },
  name: "",
  data() {
    return {
      activeName: "meetingPeople",
      label:"参会人员",
      tabsData: [
        { label: "参会人员", name: "meetingPeople" },
        { label: "议题", name: "meetingQues" },
        { label: "部门投票", name: "meetingNotes" },
        { label: "会议资料", name: "meetingPapers" },
        { label: "座位安排", name: "meetingSeats" }, //座位
        { label: "弹幕背景图", name: "meetingBacs" }
      ]
    };
  },
  methods: {
    handleClick() {
      this.tabsData.forEach(ele=>{
        if(ele.name==this.activeName){
          this.label=ele.label
        }
      })
    }
  },
  created() {}
};
</script>
<style lang="scss" scoped>
.meetings-tabs {
  height: 100%;
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  background-color: aliceblue;
  
}
.tabs-content{
  height: 40px!important;
  flex-grow: 0;
}
.router-box0{
  position: relative;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
</style>